<template>
  <div>
    <h1 class="text-2xl font-bold mb-6">个人信息</h1>

    <a-row :gutter="24">
      <!-- 左侧：头像和基本信息 -->
      <a-col :span="8">
        <a-card class="text-center">
          <a-avatar :size="120" class="mb-4">
            {{ userInfo.username?.[0]?.toUpperCase() }}
          </a-avatar>
          <h2 class="text-xl font-bold mb-2">{{ userInfo.username }}</h2>
          <p class="text-gray-500">{{ userInfo.role || '管理员' }}</p>
          <a-button type="primary" class="mt-4" @click="showEditModal = true">
            编辑资料
          </a-button>
        </a-card>
      </a-col>

      <!-- 右侧：详细信息 -->
      <a-col :span="16">
        <a-card>
          <template #title>基本信息</template>
          <a-descriptions :column="1">
            <a-descriptions-item label="用户名">
              {{ userInfo.username }}
            </a-descriptions-item>
            <a-descriptions-item label="角色">
              {{ userInfo.role || '管理员' }}
            </a-descriptions-item>
            <a-descriptions-item label="邮箱">
              {{ userInfo.email || '未设置' }}
            </a-descriptions-item>
            <a-descriptions-item label="手机号">
              {{ userInfo.phone || '未设置' }}
            </a-descriptions-item>
            <a-descriptions-item label="最后登录时间">
              {{ userInfo.lastLoginTime || '未知' }}
            </a-descriptions-item>
          </a-descriptions>
        </a-card>

        <a-card class="mt-4">
          <template #title>修改密码</template>
          <a-form
            :model="passwordForm"
            @finish="handlePasswordChange"
            layout="vertical"
          >
            <a-form-item
              label="当前密码"
              name="oldPassword"
              :rules="[{ required: true, message: '请输入当前密码' }]"
            >
              <a-input-password v-model:value="passwordForm.oldPassword" />
            </a-form-item>
            <a-form-item
              label="新密码"
              name="newPassword"
              :rules="[{ required: true, message: '请输入新密码' }]"
            >
              <a-input-password v-model:value="passwordForm.newPassword" />
            </a-form-item>
            <a-form-item
              label="确认新密码"
              name="confirmPassword"
              :rules="[
                { required: true, message: '请确认新密码' },
                { validator: validateConfirmPassword }
              ]"
            >
              <a-input-password v-model:value="passwordForm.confirmPassword" />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit">
                修改密码
              </a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>
    </a-row>

    <!-- 编辑资料弹窗 -->
    <a-modal
      v-model:open="showEditModal"
      title="编辑个人信息"
      @ok="handleEdit"
      :confirmLoading="editLoading"
    >
      <a-form
        :model="editForm"
        layout="vertical"
      >
        <a-form-item
          label="用户名"
          name="username"
          :rules="[{ required: true, message: '请输入用户名' }]"
        >
          <a-input v-model:value="editForm.username" />
        </a-form-item>
        <a-form-item
          label="邮箱"
          name="email"
        >
          <a-input v-model:value="editForm.email" />
        </a-form-item>
        <a-form-item
          label="手机号"
          name="phone"
        >
          <a-input v-model:value="editForm.phone" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'

// 模拟用户数据
const userInfo = reactive({
  username: 'admin',
  role: '管理员',
  email: 'admin@example.com',
  phone: '13800138000',
  lastLoginTime: '2024-03-20 12:00:00',
})

// 编辑资料相关
const showEditModal = ref(false)
const editForm = reactive({
  username: userInfo.username,
  email: userInfo.email,
  phone: userInfo.phone,
})

// 修改密码相关
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: '',
})

// 验证确认密码
const validateConfirmPassword = async (_rule: Rule, value: string) => {
  if (value !== passwordForm.newPassword) {
    throw new Error('两次输入的密码不一致')
  }
}

// 处理编辑资料提交
const handleEditSubmit = () => {
  // 模拟API调用
  Object.assign(userInfo, editForm)
  message.success('修改成功')
  showEditModal.value = false
}

// 处理修改密码
const handlePasswordChange = () => {
  // 模拟API调用
  message.success('密码修改成功')
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
}
</script>

<style scoped>
.ant-card {
  border-radius: 8px;
}

.ant-descriptions-item-label {
  width: 120px;
  color: #666;
}
</style>